import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';

export default function ColumnChart1() {
    // 柱状图模块1
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current) {
            const myChart = echarts.init(chartRef.current);
            let option = {
                color: ["#2f89cf"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow"
                    }
                },
                // 修改图表的大小
                grid: {
                    left: "0%",
                    top: "10px",
                    right: "2%",
                    bottom: "18%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "旅游行业",
                            "教育培训",
                            "游戏行业",
                            "医疗行业",
                            "电商行业",
                            "社交行业",
                            "金融行业"
                        ],
                        axisTick: {
                            alignWithLabel: true
                        },
                        // 修改刻度标签 相关样式
                        axisLabel: {
                            color: "rgba(255,255,255,.6) ",
                            fontSize: "12"
                        },
                        // 不显示x坐标轴的样式
                        axisLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            color: "rgba(255,255,255,.6) ",
                            fontSize: 12
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 2
                            }
                        },
                        // y轴分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        // name: "直接访问",
                        type: "bar",
                        barWidth: "35%",
                        data: [200, 300, 300, 900, 1500, 1200, 600],
                        itemStyle: {
                            borderRadius: 5
                        }
                    }
                ],
            };
            myChart.setOption(option);
            return () => {
                if (myChart) {
                    myChart.dispose();
                }
            }
        }
    }, [])
    return (
        <div className="chart1" ref={chartRef} style={{ width: '100%',height:"100%" }}></div>
    )
}
